<template>

  <div>
    <div class="recharge-hd">商品中心</div>
    <div class="allorders">
      <div class="cancellation-order">
        <label>选择店铺：</label>
        <el-select class="select" v-model="ShopId" size="mini" @change="bingChangeShopId" placeholder="请选择">
          <el-option v-for="item in shopList" :key="item.shopID" :label="item.shopName" :value="item.shopID">
          </el-option>
        </el-select>
        <label>选择区服：</label>
        <el-select class="select" v-model="M2Id" size="mini" @change="bingChangeM2Id" placeholder="请选择">
          <el-option v-for="item in M2IdList" :key="item.m2Id" :label="item.serverName" :value="item.m2Id">
          </el-option>
        </el-select>
        <label>选择角色：</label>
        <el-select class="select" v-model="HumanName" size="mini" placeholder="请选择">
          <el-option v-for="item in HumanNameList" :key="item.id" :label="item.humanName" :value="item.humanName">
          </el-option>
        </el-select>
        <label>选择物品：</label>
        <el-select class="select" v-model="GoodsType" size="mini" placeholder="请选择" @change="bingChangeGoodsType">
          <el-option v-for="item in [{id:1,name:'金币商品'},{id:2,name:'道具商品'}]" :key="item.value" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-button :loading="loading" type="danger" size="mini" @click="SellGoodsList">查询</el-button>
      </div>
    </div>
    <div class="indent" v-if="GoodsType==2">
      <!-- <el-table lazy :load="load" row-key="id" :header-cell-style=" {background:'#FAFAFA',color:'#001013',fontWeight:'bold'}" v-loading="loading" :data="tableData" height="526" style="width: 100%"> -->
      <el-table :header-cell-style="{background:'#F3F4F7',color:'#555'}" v-loading="loading" :data="tableData" style="width: 100%">
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column label="默认排序" width="80">
          <template slot-scope="scope">
            <el-popover placement="right" popper-class="popBg" trigger="hover">

              <div class="popDetail">
                <div class="popDetail-name">{{scope.row.stdItemDetails.name}}</div>
                <div>物品类型：{{moudGoods[scope.row.stdItemDetails.stdMode]}} </div>
                <div class="popDetail-img">
                  <div>
                    <img class="popimg" width="48" height="48" :src=propImage(scope.row.stdItemDetails.looks) />
                  </div>
                  <div>
                    <p>重量：{{scope.row.stdItemDetails.weight}} </p>
                    <!-- <p>物品持久：{{Number(scope.row.stdItemDetails.duraMax/1000)}}</p> -->
                    <p v-if="!isProperty(scope.row.stdItemDetails.stdMode) && scope.row.stdItemDetails.overLap>0">数量：{{scope.row.stdItemDetails.overLap>0?Number(scope.row.userItemDetails.dura+1):scope.row.userItemDetails.dura}}</p>
                  </div>
                </div>

                <div class="popDetail-jicu" v-if="isProperty(scope.row.stdItemDetails.stdMode)">
                  <h2>[基础属性]</h2>
                  <p v-if="!(scope.row.stdItemDetails.aC1==0&&scope.row.stdItemDetails.aC2==0)">防御：{{scope.row.stdItemDetails.aC1}}-{{scope.row.stdItemDetails.aC2}} </p>
                  <p v-if="!(scope.row.stdItemDetails.maC1==0&&scope.row.stdItemDetails.maC2==0)">魔御：{{scope.row.stdItemDetails.maC1}}-{{scope.row.stdItemDetails.maC2}} </p>
                  <p v-if="!(scope.row.stdItemDetails.dC1==0&&scope.row.stdItemDetails.dC2==0)">攻击：{{scope.row.stdItemDetails.dC1}}-{{scope.row.stdItemDetails.dC2}} </p>
                  <p v-if="!(scope.row.stdItemDetails.mC1==0&&scope.row.stdItemDetails.mC2==0)">魔法：{{scope.row.stdItemDetails.mC1}}-{{scope.row.stdItemDetails.mC2}} </p>
                  <p v-if="!(scope.row.stdItemDetails.sC1==0&&scope.row.stdItemDetails.sC2==0)">道术：{{scope.row.stdItemDetails.sC1}}-{{scope.row.stdItemDetails.sC2}} </p>
                  <p v-if="scope.row.stdItemDetails.hp>0">体力值：{{scope.row.stdItemDetails.hp}} </p>
                  <p v-if="scope.row.stdItemDetails.mp>0">魔法值：{{scope.row.stdItemDetails.mp}} </p>
                  <p v-if="scope.row.stdItemDetails.need>0">佩戴等级：{{scope.row.stdItemDetails.needLevel}} </p>
                </div>

                <!-- <p>生命值：{{scope.row.stdItemDetails.hp}} </p> -->
                <!-- <p>魔法值：{{scope.row.stdItemDetails.mp}} </p> -->
                <!-- <p>防御下限：{{scope.row.stdItemDetails.aC1}} </p>
                      <p>防御上限：{{scope.row.stdItemDetails.aC2}} </p> -->
                <!-- <p>魔御下限：{{scope.row.stdItemDetails.maC1}} </p>
                      <p>魔御上限：{{scope.row.stdItemDetails.maC2}} </p> -->
                <!-- <p>攻击下限：{{scope.row.stdItemDetails.dC1}} </p>
                      <p>攻击上限：{{scope.row.stdItemDetails.dC2}} </p> -->
                <!-- <p>魔法上限：{{scope.row.stdItemDetails.mC1}} </p>
                      <p>魔法下限：{{scope.row.stdItemDetails.mC2}} </p> -->
                <!-- <p>道术下限：{{scope.row.stdItemDetails.sC1}} </p>
                      <p>道术上限：{{scope.row.stdItemDetails.sC2}} </p> -->
                <!-- <p>佩戴需求：{{scope.row.stdItemDetails.need}} </p>
                      <p>佩戴等级：{{scope.row.stdItemDetails.needLevel}} </p> -->
              </div>
              <!-- <img style="cursor: pointer;" slot="reference" width="32" height="32" src="../../assets/static/t-16.png" /> -->
              <div class="popimg" slot="reference">
                <b v-if="!isProperty(scope.row.stdItemDetails.stdMode) && scope.row.stdItemDetails.overLap>0">x{{scope.row.stdItemDetails.overLap>0?Number(scope.row.userItemDetails.dura+1):scope.row.userItemDetails.dura}}</b>
                <img width="48" height="48" :src=propImage(scope.row.stdItemDetails.looks) />
              </div>

            </el-popover>

          </template>
        </el-table-column>
        <el-table-column prop="stdItemDetails" label="物品名称" sortable>
          <template slot-scope="scope">

            {{scope.row.stdItemDetails.name}}
          </template>
        </el-table-column>
        <el-table-column prop="serverName" label="所在区服" sortable>
        </el-table-column>
        <!-- <el-table-column prop="price" label="数量" sortable>
              </el-table-column> -->
        <el-table-column prop="price" label="售价" sortable>
          <template slot-scope="scope">
            <b style="color:#d82141">{{scope.row.price}}</b>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" align="center" label="上架时间" sortable width="200">
          <template slot-scope="scope">
            {{ getDateTime(scope.row.updateTime)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品状态">
          <template slot-scope="scope">
            {{goodStatus(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-popconfirm v-if="scope.row.status==4" confirm-button-text='确定' @confirm="bindPutaway(scope.row)" cancel-button-text='取消' cancel-button-type="Primary" icon="el-icon-info" icon-color="red" title="是否上架商品？">
              <el-button slot="reference" type="danger" size="mini">上架</el-button>
            </el-popconfirm>
            <el-button v-if="scope.row.status==2" type="danger" @click="bindLookOrder" size="mini">查看订单</el-button>
            <el-popconfirm confirm-button-text='确定' @confirm="bindsoldOut(scope.row)" cancel-button-text='取消' cancel-button-type="Primary" icon="el-icon-info" icon-color="red" title="是否下架商品？">
              <el-button v-if="scope.row.status==1" slot="reference" type="danger" size="mini">下架</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination background layout="prev, pager, next,sizes,total" v-if="total>0" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center;  margin-top: 60px;" :page-sizes="[20, 50, 100, 1000]">
      </el-pagination>
    </div>
    <div class="indent" v-if="GoodsType==1">
      <el-table :header-cell-style="{background:'#F3F4F7',color:'#555'}" v-loading="loading" :data="gametableData" style="width: 100%">
        <el-table-column label="默认排序" width="80px">
          <template>
            <img width="32" height="32" src="../../../assets/static/t-16.png" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsName" label="货币类型" width="80" align="center">
        </el-table-column>
        <el-table-column prop="serverName" label="所在区服" align="center">
        </el-table-column>
        <el-table-column prop="price" label="售价" sortable align="center">

        </el-table-column>
        <el-table-column prop="updateTime" align="center" label="上架时间" sortable width="200">
          <template slot-scope="scope">
            {{ getDateTime(scope.row.updateTime)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品状态">
          <template slot-scope="scope">
            {{goodStatus(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-popconfirm v-if="scope.row.status==4" confirm-button-text='确定' @confirm="bindPutaway(scope.row)" cancel-button-text='取消' cancel-button-type="Primary" icon="el-icon-info" icon-color="red" title="是否上架商品？">
              <el-button slot="reference" type="danger" size="mini">上架</el-button>
            </el-popconfirm>
            <el-button v-if="scope.row.status==2" type="danger" @click="bindLookOrder" size="mini">查看订单</el-button>
            <el-popconfirm confirm-button-text='确定' @confirm="bindsoldOut(scope.row)" cancel-button-text='取消' cancel-button-type="Primary" icon="el-icon-info" icon-color="red" title="是否下架商品？">
              <el-button v-if="scope.row.status==1" slot="reference" type="danger" size="mini">下架</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination background layout="prev, pager, next,sizes,total" v-if="gameSearch.total>0" :total='gameSearch.total' @current-change='gameSearch_current_change' @size-change='gameSearch_size_change' style="text-align: center;  margin-top: 60px;" :page-sizes="[20, 50, 100, 1000]">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import api from '../../../api/game'
import goods from './../../../utils/moduDate'
export default {
  name: 'goodsCentre',
  data () {
    return {
      moudGoods: goods.goods,
      loading: false,
      tableData: [],
      total: 0,
      page: 1,
      limit: 20,
      shopList: [], // 店铺下拉
      ShopId: '', // 店铺ID
      M2IdList: [], // 区服下拉
      M2Id: '', // 区服id
      HumanNameList: [], // 角色下拉
      HumanName: '',
      GoodsType: 2, // 1:为查询货币类商品，2:为查询道具类商品
      gametableData: [],
      gameSearch: {
        current: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  props: ['myInfo'],
  computed: {},

  mounted () {
    if (this.myInfo) {
      this.init()
    }
  },
  methods: {
    async init () {
      var q = await this.SellShopList()
      var w = await this.GameAreaList()
      var e = await this.HumanList()
      var r = await this.SellGoodsList()
      console.log(q, w, e, r)
    },
    SellShopList () {
      // 获取店铺
      return new Promise((resolve, reject) => {
        api.SellShopList().then(res => {
          this.shopList = []
          this.ShopId = ''
          if (res.data.length > 0) {
            this.shopList = res.data
            this.ShopId = this.shopList[0].shopID
            resolve(1)
          }
        })
      })
    },

    GameAreaList () {
      // 获取区服
      var dataObj = {
        shopid: this.ShopId
      }
      return new Promise((resolve, reject) => {
        api.GameAreaList(dataObj).then(res => {
          this.M2IdList = []
          this.M2Id = ''
          if (res.data.success) {
            this.M2IdList = res.data.data.areaList
            this.M2Id = this.M2IdList[0].m2Id
            resolve(2)
          }
        })
      })
    },

    HumanList () {
      // 获取角色
      var dataObj = {
        shopid: this.ShopId,
        M2Id: this.M2Id
      }
      return new Promise((resolve, reject) => {
        api.HumanList(dataObj).then(res => {
          this.HumanNameList = []
          this.HumanName = ''
          if (res.data.success) {
            this.HumanNameList = res.data.data.humanArray
            this.HumanName = this.HumanNameList[0].humanName
            resolve(3)
          }
        })
      })
    },
    SellGoodsList () {
      // 获取列表

      this.loading = true
      var dataObj = {
        ShopId: this.ShopId,
        M2Id: this.M2Id,
        HumanName: this.HumanName,
        GoodsType: this.GoodsType,
        PageSize: this.GoodsType == 2 ? this.limit : this.gameSearch.pageSize,
        Current: this.GoodsType == 2 ? this.page : this.gameSearch.current
      }
      return new Promise((resolve, reject) => {
        api.SellGoodsList(dataObj).then(res => {
          this.loading = false
          if (res.data.success) {
            if (this.GoodsType == 2) {
              this.total = res.data.data.total
              this.tableData = res.data.data.goodsList
            } else {
              this.gameSearch.total = res.data.data.total
              this.gametableData = res.data.data.goodsList
            }
            resolve(4)
          }
        })
      })
    },

    bingChangeShopId () {
      this.GameAreaList()
    },
    bingChangeM2Id () {
      this.HumanList()
    },
    current_change (e) {
      this.page = e
      this.SellGoodsList()
    },
    size_change (e) {
      this.limit = e
      this.SellGoodsList()
    },
    propImage (e) {
      var items = ''
      var index = '00'
      if (e <= 9999) {
        items = ''
        e < 1000 ? (index = '00' + e.toString()) : (index = '0' + e.toString())
      } else if (e >= 10000 && e <= 19999) {
        items = '1'
        e - 10000 < 1000
          ? (index = '00' + (e - 10000).toString())
          : (index = '0' + (e - 10000).toString())
      } else if (e >= 20000 && e <= 29999) {
        items = '2'
        e - 20000 < 1000
          ? (index = '00' + (e - 20000).toString())
          : (index = '0' + (e - 20000).toString())
      } else if (e >= 30000 && e <= 39999) {
        items = '3'
        e - 30000 < 1000
          ? (index = '00' + (e - 30000).toString())
          : (index = '0' + (e - 30000).toString())
      } else if (e >= 40000 && e <= 49999) {
        e - 40000 < 1000
          ? (index = '00' + (e - 40000).toString())
          : (index = '0' + (e - 40000).toString())
      } else if (e >= 50000 && e <= 59999) {
        items = '5'
        e - 50000 < 1000
          ? (index = '00' + (e - 50000).toString())
          : (index = '0' + (e - 50000).toString())
      } else if (e >= 60000 && e <= 65535) {
        items = '6'
        e - 60000 < 1000
          ? (index = '00' + (e - 60000).toString())
          : (index = '0' + (e - 60000).toString())
      }

      var src =
        'https://versionlibraryweb.oss-cn-hangzhou.aliyuncs.com/gm-ybg/' +
        this.ShopId +
        '/Items' +
        items +
        '/' +
        index +
        '.PNG'

      return src
    },
    goodStatus (e) {
      if (e == 1) {
        return '出售中'
      }
      if (e == 2) {
        return '已出售'
      }
      if (e == 3) {
        return '已领取'
      }
      if (e == 4) {
        return '已下架'
      }
    },
    isProperty (e) {
      if (
        e == 0 ||
        e == 1 ||
        e == 2 ||
        e == 3 ||
        e == 31 ||
        e == 46 ||
        e == 47 ||
        e == 48 ||
        e == 49 ||
        e == 50 ||
        e == 51 ||
        e == 55 ||
        e == 56 ||
        e == 57 ||
        e == 58 ||
        e == 59 ||
        e == 4 ||
        e == 7 ||
        e == 40 ||
        e == 41 ||
        e == 42 ||
        e == 43
      ) {
        return false
      } else {
        return true
      }
    },
    getDateTime (e) {
      let d = new Date(e)
      d =
        d.getFullYear() +
        '/' +
        (d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)) +
        '/' +
        (d.getDate() > 9 ? d.getDate() + 1 : '0' + d.getDate() + 1) +
        ' ' +
        (d.getHours() > 9 ? d.getHours() : '0' + d.getHours()) +
        ':' +
        (d.getMinutes() > 9 ? d.getMinutes() : '0' + d.getMinutes()) +
        ':' +
        (d.getSeconds() > 9 ? d.getSeconds() : '0' + d.getSeconds())
      let newTime = new Date()
      let endTime = new Date(d)
      var lefttime = endTime.getTime() - newTime.getTime(), // 距离结束时间的毫秒数
        leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), // 计算天数
        lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24), // 计算小时数
        leftm = Math.floor((lefttime / (1000 * 60)) % 60), // 计算分钟数
        lefts = Math.floor((lefttime / 1000) % 60) // 计算秒数
      // return leftd + '天' + lefth + '时' + leftm + '分' + lefts
      return d
    },
    gameType (e) {
      if (e == 1) {
        return '金币'
      }
      if (e == 2) {
        return '元宝'
      }
      if (e == 3) {
        return '金刚石'
      }
      if (e == 4) {
        return '灵符'
      }
      if (e == 5) {
        return '游戏点'
      }
      if (e == 6) {
        return '声望'
      }
      if (e == 7) {
        return '荣誉点'
      }
    },
    gameSearch_current_change (e) {
      this.gameSearch.current = e
      this.SellGoodsList()
    },
    gameSearch_size_change (e) {
      this.gameSearch.pageSize = e
      this.SellGoodsList()
    },
    bingChangeGoodsType () {
      this.SellGoodsList()
    },
    bindPutaway (e) {
      console.log(e)
    },
    bindsoldOut (e) {
      console.log(e)
    },
    bindLookOrder () {
      this.$emit('setIndex', 2)
    }
  }
}
</script>

<style lang="less" scoped>
.con-t-select {
  margin-top: 0px;
}
.content {
  display: flex;
  min-height: 100vh;
}
.myorderform {
  flex: 1;
  background-color: #fafafa;
}
.myset {
  text-align: center;
  padding: 70px 20px 50px;
  font-size: 16px;
  img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  div {
    span {
      color: #d1483f;
    }
  }
}
.myorderform-title {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}
.goodsbuy {
  padding: 15px 0px;
  color: #828282;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
}
.goodsbuyatv {
  border-left: 4px solid #d82141;
  background-color: #fff;
}
.orderform {
  background-color: #fff;
  padding: 60px 40px;
  flex: 4;
  box-sizing: border-box;
}
.allorders {
  display: flex;
  margin-bottom: 20px;
}
.cancellation-order {
  border-right: 2px solid #ddd;

  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  label {
    margin-bottom: 0px !important;
    font-size: 14px;
    width: 120px;
  }
  .select {
    margin-right: 10px;
  }
}
.cancellation-active {
  color: #d82141;
}
.cancellation-order:last-child {
  border: none;
}
.cancellation-order:first-child {
  padding-left: 0;
}
.uni-input {
  border: 1px solid #e4e4e4;
  width: 30%;
  border-radius: 10px;
  padding: 10px 0;
  padding-left: 20px;
  margin-bottom: 40px;
}
.indent-select {
  display: flex;
  .uni-data-select {
    margin-right: 10px;
  }
  img {
    width: 80px;
    height: 60px;
  }
}
.uni-stat__select {
  margin-right: 40px;
  margin-bottom: 40px;
}
.seedetails {
  color: #fff;
  background: linear-gradient(#d82141, #f36638);
}

.recharge-hd {
  border-left: 3px solid #d82141;
  padding: 2px 10px;
  margin-bottom: 30px;
}
.recharge-bd {
  width: 500px;
  margin-left: 150px;
}

.recharg-but {
  margin-left: 100px;
  margin-top: 20px;
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}

.myInfo {
  margin-top: 10px;
  .icon {
    font-style: normal;
    color: #986e32;
    font-size: 12px;
    background: #ffe863;
    border: 1px #986e32 dashed;
    padding: 2px 3px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
  }
}

.popimg {
  cursor: pointer;
  background: url("./../../../assets/static/t-17.png") no-repeat no-repeat;
  background-size: 48px 48px;
  width: 48px;
  height: 48px;
  position: relative;
  b {
    position: absolute;
    bottom: 0px;
    right: 3px;
    color: #12ff3d;
    font-size: 16px;
  }
}
.popDetail {
  padding: 10px;
  color: #fff;
  font-size: 14px;
}
.popDetail-name {
  color: #b30000;
  font-weight: bold;
  border-bottom: 1px solid #bfbfbf;
  padding: 10px 0px 5px 0px;
  font-size: 16px;
  margin-bottom: 5px;
}
.popDetail-img {
  overflow: hidden;

  padding: 10px 0px;
  display: flex;
  align-items: center;
  div {
    float: left;
    .popimg {
      margin-right: 10px;
    }
  }
}

.popDetail-jicu {
  border-top: 1px solid #bfbfbf;
  padding: 10px 0px;
  h2 {
    font-size: 14px;
    color: #00fef8;
    margin-bottom: 5px;
  }
}
</style>